<template>
  <div>
    <base-header :text="title" isConfirms @dialogConfirmModify="dialogConfirmModify" :isConfirm1="true">
      
    </base-header>
    <div style="background: rgba(0, 0, 0,0.2);">
      <div style="padding:0 0.4rem;overflow: auto;" :style="{height: height + 'px'}">
        <div style="display: flex;justify-content: space-around;margin-top: 1.65rem;">
          <div class="btn3"> 
            <div class="btn31"  @click="addtemperature"  >+</div>
            <div class="btn32" @click="lesstemperature" >-</div>
          </div> 
        </div>
        <div class="btn4">温度</div>
        <div style="display: flex;justify-content: space-between;padding-bottom:0.8rem">
          <div  @click="mode" class="btn11" ></div>
          <div  @click="wind" class="btn12"></div>
          <div  @click="Dehumidify" class="btn13"></div>
        </div>
        <div>
          <div  @click="upDown" style="display: flex;justify-content: space-between;" class="btn21">
            <div>上下扫风</div>
            <div style="width:0.9rem;height:0.9rem"><img style="width:100%;height:100%;float:left" src="../assets/yuandian.png" alt=""></div>
          </div>
          <div  @click="leftRight" style="display: flex;justify-content: space-between;"  class="btn22">
            <div>左右扫风</div>
            <div style="width:0.9rem;height:0.9rem"><img style="width:100%;height:100%;float:left" src="../assets/yuandian.png" alt=""></div>
          </div>
        </div>
        
      </div>
      <error-alert :show="showAlert" text="创建成功"></error-alert>
    </div>
  </div>
</template>

<script>
  import BaseHeader from "../components/BaseHeader.vue";
  import ErrorAlert from "../components/ErrorAlert.vue";
  import ModifyDialog from "../components/ModifyDialog.vue";

  export default {
    components: {
      ErrorAlert,
      BaseHeader,
      ModifyDialog
      },
    data() {
      return {
        title: '大金',
        height:  window.innerHeight - (223*(window.innerWidth/1080)),
        showAlert: false,
       
      }
    },
    methods:{
      
      //模式 1      风速2    除湿 3   上下扫风  4   左右扫风 5  温度＋6   温度－7
      //模式
      mode(){
        let str = 1;
        if (localStorage.getItem('from') === 'android') {
          window.android.controlAirConditioner(str)
        } else if (localStorage.getItem('from') === 'ios') {
          window.webkit.messageHandlers.controlAirConditioner.postMessage(str)
        }
      },

      //风速
      wind(){
         let str = 2;
        if (localStorage.getItem('from') === 'android') {
          window.android.controlAirConditioner(str)
        } else if (localStorage.getItem('from') === 'ios') {
          window.webkit.messageHandlers.controlAirConditioner.postMessage(str)
        }
      },

      //除湿
      Dehumidify(){
         let str = 3;
        if (localStorage.getItem('from') === 'android') {
          window.android.controlAirConditioner(str)
        } else if (localStorage.getItem('from') === 'ios') {
          window.webkit.messageHandlers.controlAirConditioner.postMessage(str)
        }
      },

      //上下扫风
      upDown(){
         let str = 4;
        if (localStorage.getItem('from') === 'android') {
          window.android.controlAirConditioner(str)
        } else if (localStorage.getItem('from') === 'ios') {
          window.webkit.messageHandlers.controlAirConditioner.postMessage(str)
        }
      },

      //左右扫风
      leftRight(){
         let str = 5;
        if (localStorage.getItem('from') === 'android') {
          window.android.controlAirConditioner(str)
        } else if (localStorage.getItem('from') === 'ios') {
          window.webkit.messageHandlers.controlAirConditioner.postMessage(str)
        }
      },

      //温度＋
      addtemperature(){
         let str = 6;
        if (localStorage.getItem('from') === 'android') {
          window.android.controlAirConditioner(str)
        } else if (localStorage.getItem('from') === 'ios') {
          window.webkit.messageHandlers.controlAirConditioner.postMessage(str)
        }
      },

      //温度－
      lesstemperature(){
         let str = 7;
        if (localStorage.getItem('from') === 'android') {
          window.android.controlAirConditioner(str)
        } else if (localStorage.getItem('from') === 'ios') {
          window.webkit.messageHandlers.controlAirConditioner.postMessage(str)
        }
      },
       chrList(v) {
        this.list = v.chrList        
      },
      dialogConfirmModify(){
        console.log($(".input1").val())
      }


    },
     created(){
      window.chrList = this.chrList;
    },

    mounted(){
      if (localStorage.getItem('from') === 'android') {
        window.android.getChrList()
      } else if (localStorage.getItem('from') === 'ios') {
        window.webkit.messageHandlers.getChrList.postMessage('')
      }
      if(this.showAlert === false){
        this.showAlert = true;
        let self = this;
        setTimeout(function () {
          self.showAlert = false
        },3000)
      }
    }
  }
</script>

<style scoped>
  .btn11{
    width: 2.9rem;
    height: 1rem;
    background: url(../assets/moshi.png)no-repeat;
    background-size:100% 100%
  }
  .btn12{
    width: 2.9rem;
    height: 1rem;
    background: url(../assets/chushi.png)no-repeat;
    background-size:100% 100%
  }
  .btn13{
    width: 2.9rem;
    height: 1rem;
    background: url(../assets/fengsu.png)no-repeat;
    background-size:100% 100%
  }
  .btn21, .btn22{
    height: 0.9rem;
    font-size: 0.5rem;
    color: #fff;
    line-height: 0.9rem;
    text-align: center;
    background: url(../assets/changxixian.png)no-repeat top;
    background-size:100% 1px; 
    padding: 0.38rem 1.02rem 0.41rem 0.9rem; 
  }
  .btn3{
    margin:0 auto;
    width: 1.85rem;
    height: 3.91rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
 .btn3 .btn31{
   height: 1.91rem;
   line-height: 1.93rem;
   background: #fff;
   text-align: center;
   font-size: 1rem;
   color: #004447;
   border-top-left-radius:2em;
  border-top-right-radius:2em;
 }
 .btn3 .btn32{
   height: 1.91rem;
   line-height: 1.93rem;
   background: #fff;
   text-align: center;
   font-size: 1rem;
   color: #004447;
   border-bottom-left-radius:2em;
  border-bottom-right-radius:2em;
 }

  .btn4{
    
    
    text-align: center;
    font-size: 0.44rem;
    color: #fff;
    margin: 0.5rem auto 1.25rem auto;
  }
</style>

